<template>
  <div>
    <!-- 三级导航分类 -->
    <CategorySelector :isDisabled="showStatus!==ShowStatus.SHOW_SPU"/>
    <!-- 添加spu -->
    <el-card style="margin-top:20px">
      <!-- spu属性列表 -->
      <SpuList @setShowStatus="changeShowStatus" @getSpuInfo="getSpuInfoList" v-if="showStatus === ShowStatus.SHOW_SPU"></SpuList>
      <!-- 添加spu列表 -->
      <SpuForm @setShowStatus="changeShowStatus" :currentSpuInfo="currentSpuInfo" v-if="showStatus === ShowStatus.ADD_SPU"></SpuForm>
      <!-- 添加sku列表 -->
      <SkuForm @setShowStatus="changeShowStatus" :spuInfo="currentSpuInfo" v-if="showStatus === ShowStatus.ADD_SKU"></SkuForm>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "spu"
}
</script>

<script setup lang="ts">
import SpuList from "./components/SpuList.vue"
import SkuForm from "./components/SkuForm.vue";
import SpuForm from "./components/SpuForm.vue";
import { ShowStatus } from "./types";
import { ref } from "vue"


const showStatus = ref(ShowStatus.SHOW_SPU)

// 父组件向spuform传递的数据
const currentSpuInfo=ref({})

// 1.自定义事件 切换组件
const changeShowStatus = (status: ShowStatus) => {
  showStatus.value=status
}

// 2. 接收子组件传递的数据 并传递给spuform
const getSpuInfoList = (spuInfo) => {
  // console.log("33333",spuInfo)
  currentSpuInfo.value = {
    ...spuInfo,
    // 准备两个数组
    spuImageList: [],
    spuSaleAttrValueList:[]
  }
  // console.log("222222",currentSpuInfo)
}

</script>
<style>

</style>
